<template>
  <div>
    <div class="personal" v-if="personal" @click="showPersonalInfo">
      <img v-if="!personal.head" class="head" src="@/assets/img/default_head.png" />
      <img v-else class="head" :src="personal.head" />
      <div class="name">{{ personal.name }}</div>
      <div class="phone">{{ personal.phone }}</div>
    </div>
    <div class="menu">
      <van-cell title="修改密码" is-link @click="modifyPassword"/>
      <van-cell title="已完成订单" is-link @click="showOrder" />
      <van-cell title="帮助说明" is-link />
    </div>
    <van-button class="button" round block type="danger" @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState(['personal']),
  methods: {
    showOrder() {
      app.push('/finishOrder');
    },
    showPersonalInfo() {
      app.push('/personalInfo', { ...this.personal });
    },
    modifyPassword() {
      app.push('/modifyPassword');
    },
    logout() {
      delete localStorage.userId;
      app.replace('/login');
    },
  }
}
</script>


<style scoped lang="less">
.personal {
  background: rgba(255, 0, 0, 0.677);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px 0px;
}
.head {
  width: 100px;
  height: 100px;
  border-radius: 60px;
}
.name {
  color: white;
  font-size: 30px;
  font-weight: bold;
  margin: 10px 0 20px 0;
}
.phone {
  color: gold;
}
.button {
  margin: 100px 30px 0 30px;
  width: 310px;
}
</style>
